<template>
  <div>
    <div class="Collection">
      <a-form class="a_form_sty" @submit="handleInput" :form="orgform">
        <div class="Collectiontype">
          <a-form-item
            style="font-size:18px;flex:1;"
            label="收款人类型"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15,offset:1 }"
          >
            <a-radio-group @change="onChange" v-model="radiovalue">
              <a-radio :value="1">个人客户</a-radio>
              <a-radio :value="2">单位客户</a-radio>
            </a-radio-group>
          </a-form-item>
        </div>
        <br />
        <div v-if="radiovalue == 1">
          <div class="Collectiondata">
            <a-form-item
              style="flex:1;"
              label="收款人账号"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15,offset:1 }"
            >
              <a-input
                style="width:350px"
                v-decorator="[
              'payee',
                { rules: [{
                  required: true,
                  message: '请输入11位手机号' }]
                  }
                ]"
                size="large"
                placeholder="请输入手机号"
                :disabled="disabled"
                @blur="selectname"
              ></a-input>
              <span style="color: #29a576;cursor:pointer;" @click="Rewrite">修改</span>
            </a-form-item>
          </div>
        </div>
        <div v-if="radiovalue == 2">
          <div class="Collectiondata">
            <a-form-item
              style="flex:1;"
              label="收款人账号"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15,offset:1 }"
            >
              <a-input
                style="width:350px"
                v-decorator="[
              'payee',
                { rules: [{
                  required: true,
                  message: '请输入正确的邮箱' }]
                  }
                ]"
                size="large"
                placeholder="请输入邮箱地址"
                :disabled="disabled"
                @blur="selectname"
              ></a-input>
              <span style="color: #29a576;cursor:pointer;" @click="Rewrite">修改</span>
            </a-form-item>
          </div>
        </div>
        <div class="Collectiondata">
          <a-form-item
            style=""
            label="转账金额"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 9,offset:1 }"
          >
            <div class="cash_out">
              <a-input
                style="width:200px"
                v-decorator="[
                                'amountt',
                                { rules: [{
                              required: true,
                              message: '请输入数字' },{validator: validateCode}]
                              }
                          ]"
                size="large"
                placeholder="请输入金额"
              ></a-input>元
              <div class="tooltip_sty">
                <div id="tooltip_sty">单笔小于{{singleAmountLimit}}万，单日小于{{dayAmountLimit}}万</div>
              </div>
              <!-- ,
              validateTrigger: 'blur'-->
            </div>
          </a-form-item>
          <a-form-item
            style="flex:1;"
            label="转账说明"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15,offset:1 }"
          >
            <a-input
              style="width:350px"
              v-decorator="[
              'Transfer',
                { rules: [{
                  message: '转账说明' }]
                  }
                ]"
              size="large"
            ></a-input>
          </a-form-item>
        </div>
        <div style=" margin: 0 auto;width:200px">
          <a-button type="primary" html-type="submit">下一步</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orgform: this.$form.createForm(this),
      radiovalue: 1,
      dayAmountLimit: "",
      singleAmountLimit: "",
      mobileNo: "",
      showName: "",
      disabled: false,
      email: "",
      memberType: "CU",
      username: "",
      MyselfmobileNo: ""
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.orgform.setFieldsValue({ Transfer: "转账" });
    });
    this.selectQuota();
  },

  methods: {
    onChange(e) {
     
      if (e.target.value == 1) {
        this.memberType = "CU";
      
      } else {
        this.memberType = "CB";
     
      }
    },
    handleInput(e) {
      e.preventDefault();
      this.orgform.validateFields((err, values) => {
        if (!err) {
   
          this.$axios
            .post("/agent/transfer/checked", {
              amount: values.amountt * 100,
              transMobileNo: this.username,
              memberType: this.memberType
            })
            .then(res => {
           
              if (res.data.code == "FAIL") {
                this.$message.error(res.data.message);
              } else if (res.data.code == "OK") {
               
                this.$router.push({
                  name: "客户转账确认",
                  // path: "/cashmore-next",
                  params: {
                    seat: res.data.data,
                    Transfer: values.Transfer,
                    memberType: this.memberType
                  }
                });
              }
            });
        }
      });
    },
    validateCode(rule, value, callback) {
      if (
        value &&
        !/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(
          value
        )
      ) {
        callback("请输入正确的金额！");
        return;
      } else {
        callback();
      }
    },
    // phonedateCode(rule, value, callback) {
    //   if (
    //     value &&
    //     !/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(
    //       value
    //     )
    //   ) {
    //     callback("请输入正确的手机号！");
    //     return;
    //   } else {
    //     callback();
    //   }
    // },
    // emaildateCode(rule, value, callback) {
    //   if (
    //     value &&
    //     !/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/.test(
    //       value
    //     )
    //   ) {
    //     callback("请输入正确的邮箱号！");
    //     return;
    //   } else {
    //     callback();
    //   }
    // },
    selectname() {
      var user = this.orgform.getFieldValue("payee");
     

      this.$axios
        .post("/agent/transfer/getMemberInfo", {
          transMobileNo: user,
          memberType: this.memberType
        })
        .then(res => {
        
          if (res.data.code == "OK") {
            if (res.data.data.memberType == "CU") {
              this.showName = res.data.data.showName;
              this.mobileNo = res.data.data.mobileNo;
              this.username = res.data.data.username;
              if (this.mobileNo == this.MyselfmobileNo) {
                this.Rewrite();
                this.$message.error("不能给自己转账");
              } else {
                let name = this.namefilter(res.data.data.showName);
                let phone = this.phonefilter(res.data.data.mobileNo);
                this.orgform.setFieldsValue({
                  payee: name + "(" + phone + ")"
                });
                this.disabled = true;
              }
            } else {
              this.showName = res.data.data.showName;
              this.email = res.data.data.email;
              this.mobileNo = res.data.data.mobileNo;
              this.username = res.data.data.username;
              if (this.mobileNo == this.MyselfmobileNo) {
                this.Rewrite();
                this.$message.error("不能给自己转账");
              } else {
                let name = this.namefilter(res.data.data.showName);
                let email = this.emailfilter(res.data.data.email);
                this.orgform.setFieldsValue({
                  payee: name + "(" + email + ")"
                });
                this.disabled = true;
              }
            }
          } else {
            // this.orgform.setFieldsValue({ payee: "无此用户，请重新输出" });
            this.$message.error("无此用户，请重新输出");

            // this.$error({
            //   title: "输入账户错误",
            //   content: "无此用户，请重新输出"
            // });
          }
        });
    },
    selectQuota() {
      this.$axios.get("/agent/transfer/select").then(res => {
        // console.log(res.data.data.dayAmountLimit);
        // console.log(res.data.data.mobileNo);
        this.MyselfmobileNo = res.data.data.mobileNo;
        this.singleAmountLimit = res.data.data.singleAmountLimit / 1000000;
        this.dayAmountLimit = res.data.data.dayAmountLimit / 1000000;
      });
    },
    namefilter(value) {
      if (value) {
        var reg = /^./;
        return value.replace(reg, "*");
      }
    },
    phonefilter(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
    emailfilter(value) {
      if (value) {
        let len = value.indexOf("@") - 2;
        console.log(len);
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          value.substring(0, 1) +
          arrstring +
          value.substring(value.indexOf("@") - 1)
        );
      }
    },
    Rewrite() {
      this.orgform.setFieldsValue({ payee: "" });
      this.disabled = false;
    }
  }
};
</script>

<style scoped>
.Collectiontype {
  padding-top: 10vh;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.cash_out {
  display: flex;
  align-items: center;
  width: 600px;
}

.tooltip_sty {
  padding: 0 15px;
  margin-left: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  background-color: #f5fcff;
  border: 1px solid #3b9fe2;
  border-radius: 4px;
  position: relative;
  line-height: 30px;
}

.tooltip_sty:before {
  content: "";
  position: absolute;
  left: -17px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right-color: #3b9fe2;
}

.tooltip_sty:after {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right-color: white;
}

#tooltip_sty {
  color: #3b9fe2;
  /* text-align: center;
    margin-top: -4px; */
}
</style>